<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='./test.js'></script>
    <style>
        body {
            background: #333;

        }

        #box {
            position: absolute;
            top: 100px;
            left: 200px;
            width: 460px;
            height: 360px;
        }

        #img1 {
            opacity: .7;
            position: absolute;
            top: 0;
            left: 0;
            width: 460px;
            height: 360px;
        }

        #img2 {
            position: absolute;
            top: 0;
            left: 0;
            clip: rect(0, 200px, 200px, 0);
            width: 460px;
            height: 360px;
        }

        #main {
            border: 1px solid #fff;
            width: 200px;
            height: 200px;
            position: absolute;
        }

        .minDiv {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
        }

        .left-up {
            top: -4px;
            left: -4px;
            cursor:nw-resize;
        }

        .up {
            left: 50%;
            margin-left: -4px;
            margin-top: -4px;
            cursor: n-resize
        }

        .right-up {
            right: -4px;
            top: -4px;
            cursor: ne-resize
        }

        .right {
            right: -4px;
            top: 50%;
            margin-top: -4px;
            cursor: e-resize
        }

        .right-down {
            right: -4px;
            bottom: -4px;
            cursor: se-resize
        }

        .down {
            bottom: -4px;
            left: 50%;
            margin-left: -4px;
            cursor: s-resize
        }

        .left-down {
            left: -4px;
            bottom: -4px;
            cursor: sw-resize
        }

        .left {
            left: -4px;
            top: 50%;
            margin-top: -4px;
            cursor: w-resize;
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="http://i3.bbswater.fd.zol-img.com.cn/t_s1200x5000/g1/M04/0C/0F/Cg-4jlSgyuKIGOwCAADqmnR5CdUAAPhEALloBEAAOqy139.jpg
           " alt="" id="img1">
        <img src="http://i3.bbswater.fd.zol-img.com.cn/t_s1200x5000/g1/M04/0C/0F/Cg-4jlSgyuKIGOwCAADqmnR5CdUAAPhEALloBEAAOqy139.jpg
           " alt="" id="img2">
        <div id="main">
            <div id="leftUp" class="minDiv left-up"></div>
            <div id="up" class="minDiv up"></div>
            <div id="rightUp" class="minDiv right-up"></div>
            <div id="right" class="minDiv right"></div>
            <div id="rightDown" class="minDiv right-down"></div>
            <div id="down" class="minDiv down"></div>
            <div id="leftDown" class="minDiv left-down"></div>
            <div id="left" class="minDiv left"></div>
        </div>
    </div>
</body>

</html>